<template>
  <div class="exhibition-wrapper">
    <div class="top-buttons">
      <div @click="showYearSelect = !showYearSelect">
        <div class="year-button">
          <span>{{selectYear + '年'}}</span>
          <img src="@media/common/icon-arrow-blue@2x.png" />
        </div>
        <div class="year-list" v-if="showYearSelect">
          <div
            class="year-row"
            v-for="(item) of yearItems"
            :key="item"
            @click="selectYear = item, queryYear()"
          >
            <span>{{item}}</span>
          </div>
        </div>
      </div>
      <ButtonsBar class="creat-button" :items="topItems" />
      <div v-if="editable">
        <button class="end-edit-button" @click="editable = false">
          <span>{{'完成编辑'}}</span>
        </button>
      </div>
    </div>
    <TimeLine
      class="time-line"
      :items="queryItems"
      :editable="editable"
      :funcClick="handleClickItem"
      :funcDelete="handleDeleteItem"
      :funcShare="handleShareItem"
      :funcEdit="handleEditItem"
    />
    <!--              :style="{transform: `scale(${scaleValue})`, height: `${timeLineHeight}`}"/>-->
    <ButtonsBar class="bottom-buttons" />
    <CreateExpoDialog :funcConfirm="fetchYears"></CreateExpoDialog>
    <ShareExpoDialog :uid="shareUid"></ShareExpoDialog>
  </div>
</template>

<script>
import ButtonsBar from "@/component/ButtonsBar";
import TimeLine from "@/component/Timeline";
import exhibitionService from "@api/exhibitionService";
import CreateExpoDialog from "@/component/dialog/CreateExpoDialog";
import ShareExpoDialog from "@/component/dialog/ShareExpoDialog";
import { Loading } from "element-ui";
export default {
  components: {
    TimeLine,
    ButtonsBar,
    CreateExpoDialog,
    ShareExpoDialog,
  },
  data() {
    return {
      queryItems: [],
      yearItems: [],
      selectYear: "",
      showYearSelect: false,
      editable: false,
      shareUid: "",
      // 判断是否隐藏
      bool: false,
    };
  },
  // 监听属性 类似于data概念
  computed: {
    topItems() {
      let items = [];
      items.push({
        name: "新建展区",
        img: require("@media/common/icon-setting@2x.png"),
        bool: this.bool,
        action: () => {
          this.$store.commit("dialog/CREATE_EXPO_OPEN", true);
        },
      });
      if (!this.editable) {
        items.push({
          name: "展区管理",
          bool: true,
          img: require("@media/expo/icon-module-edit@2x.png"),
          action: () => {
            this.editable = true;
          },
        });
      }
      return items;
    },
    scaleValue() {
      let height =
        document.documentElement.clientHeight || document.body.clientHeight;
      let width =
        document.documentElement.clientWidth || document.body.clientWidth;
      return (height / 1080 / width) * 1920 * 0.9;
    },
    timeLineHeight() {
      let width =
        document.documentElement.clientWidth || document.body.clientWidth;
      return (width / 1920) * 1080 * 0.9 + "px";
    },
  },
  // 监控data中的数据变化
  watch: {
    selectYear(value) {
      if (!value) {
        return;
      }
      this.$store.commit("user/LAST_SELECTED_YEAR", value);
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.selectYear = this.$store.state.user.lastSelectedYear;
    this.bool = JSON.parse(localStorage.getItem("bool")).bool;
    this.fetchYears();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    fetchYears() {
     let loadingInstance = Loading.service({
        fullscreen: true,
        background: "rgba(0, 0, 0, 0.2)",
      });
      exhibitionService
        .fetchYear()
        .then((res) => {
          console.log(res);
          const years = res.data.data;
          if (years.length > 0) {
            this.yearItems = years.sort().reverse();
            if (this.yearItems.indexOf(Number(this.selectYear)) == -1) {
              this.selectYear = this.yearItems[0];
            }
          }
          console.log(this.yearItems);
          this.queryYear();
          this.$nextTick(() => {
            loadingInstance.close();
          });
        })
        .catch((res) => {
          console.log(res);
           this.$nextTick(() => {
            loadingInstance.close();
          });
        });
    },
    queryYear() {
      let params = {
        year: this.selectYear,
        sort: "1",
      };
      exhibitionService
        .queryYear(params)
        .then((res) => {
          console.log(res);
          this.queryItems = res.data.data.reverse();
          console.log(123333, this.queryItems);
          this.queryItems.forEach((item) => {
            item["bool"] = this.bool;
          });
          console.log(123333, this.queryItems);
          // this.queryItems.map((item)=>{
          //   const shortDate = item.datetime.replace(/^([\d]{4}-)|(0)|( [\S]*)$/g, '')
          //   item.datetime = shortDate
          // })
        })
        .catch((res) => {
          console.log(res);
        });
    },
    handleClickItem(item) {
      console.log(123456);

      this.$router.push({
        path: "/firstExpomodule",
        query: {
          uid: item.uid,
        },
      });
    },
    handleEditItem(item) {
      this.$store.commit("dialog/EDIT_EXPO_ITEM", item);
      this.$store.commit("dialog/EDIT_EXPO_OPEN", true);
    },
    handleShareItem(item) {
      this.shareUid = item.uid;
      this.$store.commit("dialog/SHARE_EXPO_OPEN", true);
    },
    handleDeleteItem(item) {
      this.$dialog({
        content: `确定要删除<span style="font-weight: bold">${item.name}</span>吗`,
        funcConfirm: () => {
          this.requestDeleteExpo(item);
        },
      });
    },
    requestDeleteExpo(item) {
      exhibitionService
        .deleteExpo(item.uid)
        .then((res) => {
          console.log(res.data.data);
          this.queryYear();
        })
        .catch((res) => {
          console.log(res);
        });
    },
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="scss">
@import "@/style/scss/exhibition.scss";
</style>
